<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">

<!--表格-->
<div th:fragment="main">
    <!--批量添加、删除-->
    <div class="layui-card-header">
        <button class="layui-btn layui-btn-danger" onclick="delAll()"><i class="layui-icon"></i>批量删除</button>
        <button class="layui-btn"
                th:onclick="xadmin.open('导入问卷', [[@{/change/ques-add(sheetName=${sheetName})}]],450,240)">
            <i class="layui-icon"></i>问卷导入
        </button>
        <button class="layui-btn"
                th:onclick="impQues([[${sheetName}]])">
            <i class="layui-icon"></i>问卷发布
        </button>
        <button class="layui-btn" th:onclick="window.open([[@{/expQues(sheetName=${sheetName})}]])">
            <i class="layui-icon"></i>问卷导出
        </button>
    </div>
    <!--表格内容-->
    <div class="layui-card-body layui-table-body layui-table-main">
        <table class="layui-table layui-form">
            <thead>
            <tr>
                <th>
                    <label>
                        <input type="checkbox" lay-filter="checkall" name="" lay-skin="primary">
                    </label>
                </th>
                <th>序号</th>
                <th>品牌体验</th>
                <th>非常不同意</th>
                <th>比较不同意</th>
                <th>一般</th>
                <th>比较同意</th>
                <th>非常同意</th>
                <th>操作</th>
            </tr>
            </thead>
            <tbody>
            <tr th:each="ques:${questionnaires}">
                <td>
                    <input type="checkbox" name="id" th:value=${ques.getId()} lay-skin="primary">
                </td>
                <td th:text="${ques.getId()}"></td>
                <td th:text="${ques.getContent()}"></td>
                <td>1</td>
                <td>2</td>
                <td>3</td>
                <td>4</td>
                <td>5</td>
                <td class="td-manage">
                    <a title="编辑"
                       th:onclick="xadmin.open('编辑',[[@{/change/ques-edit(id=${ques.getId()},sheetName=${sheetName})}]],450,220)"
                       href="javascript:">
                        <i class="layui-icon">&#xe642;</i>
                    </a>
                    <a title="删除" th:onclick="del([[${ques.getId()}]])" href="javascript:">
                        <i class="layui-icon">&#xe640;</i>
                    </a>
                </td>
            </tr>
            </tbody>
        </table>
    </div>
</div>

<!--JavaScript-->
<script th:fragment="js" th:inline="javascript">
    const sheetName = [[${sheetName}]];
    layui.use(['laydate', 'form'], function () {
        const laydate = layui.laydate;
        const form = layui.form;

        // 监听全选
        form.on('checkbox(checkall)', function (data) {
            if (data.elem.checked) {
                $('tbody input').prop('checked', true);
            } else {
                $('tbody input').prop('checked', false);
            }
            form.render('checkbox');
        });

        //执行一个laydate实例
        laydate.render({
            elem: '#start' //指定元素
        });

        //执行一个laydate实例
        laydate.render({
            elem: '#end' //指定元素
        });

    });

    /*删除功能*/
    function del_obj(id) {
        let res = false;
        const data = {"sheetName": sheetName, "id": id};
        $.post({
            url: "/delQues",
            data: data,
            async: false,
            success: function (msg) {
                if (msg === "success") res = true;
                else {
                    res = false;
                    console.log(msg);
                }
            }
        });
        return res;
    }

    function del(id) {
        layer.confirm("确认要删除吗？", function () {
            if (del_obj(id)) {
                layer.msg("删除成功", {icon: 1, time: 1000}, function () {
                    xadmin.father_reload();
                });
            } else {
                layer.msg("删除失败", {icon: 5});
            }
        });
    }


    function delAll() {
        const ids = [];

        // 获取选中的id
        $('tbody input').each(function () {
            if ($(this).prop('checked')) {
                ids.push($(this).val())
            }
        });

        layer.confirm('确认要删除吗？' + ids.toString(), function () {
            let res = false;
            //捉到所有被选中的，发异步进行删除
            for (let i=0; i<ids.length ; i++) if(!(res = del_obj(ids[i]))) break;
            if (res) {
                layer.msg("删除成功", {icon: 1, time: 1000}, function () {
                    xadmin.father_reload();
                });
            } else {
                layer.msg("删除失败", {icon: 5});
            }
        });
    }

    function impQues(sheetName) {
        layer.confirm("发布已导入的问卷？", function () {
            $.post({
                url: "/impQues",
                data: {"sheetName": sheetName},
                async: false,
                success: function (msg) {
                    if (msg === "success") {
                        layer.msg("发布成功", {icon: 1, time: 1000}, function () {
                            xadmin.father_reload();
                        });
                    } else {
                        layer.msg("发布失败", {icon: 5});
                    }
                }
            })
        })
    }
</script>
</html>